<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body .el-table th.gutter {
            display: table-cell !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="详细描述" prop="type">
            <el-input v-model="queryParams.description"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            style="width: 100%;"
            >
        <el-table-column
                prop="procInstId"
                label="实例ID"
                width="80">
        </el-table-column>
        <el-table-column
                prop="personId"
                label="员工ID"
                width="80">
        </el-table-column>
        <el-table-column
                prop="personName"
                label="员工名称"
                width="100">
        </el-table-column>
        <el-table-column
                prop="leaveDay"
                label="请假天数"
                width="100">
        </el-table-column>
        <el-table-column
                prop="dept"
                label="所属部门"
                width="100">
        </el-table-column>
        <el-table-column
                prop="description"
                label="详细描述"
                width="100">
        </el-table-column>
        <el-table-column
                prop="stateString"
                label="状态"
                width="100"
                filter-placement="bottom-end">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.stateString === '已结束' ? 'danger' : 'success'"
                        disable-transitions>{{scope.row.stateString}}</el-tag>
            </template>
        </el-table-column>

        <el-table-column
                prop="createTime"
                label="创建时间"
                width="300">
        </el-table-column>

        <el-table-column
                label="操作"
                width="80">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="deployRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    查看流程
                </el-button>
                </template>

        </el-table-column>

    </el-table>
    <el-pagination
            style="float:right"
            @current-change="changePage"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog  :visible.sync="open" width="65%" height="50%" append-to-body>
        <template>
            <img  alt="" :src="imgSrc"  />
        </template>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script  src="js/axios.js"></script>
<script  src="js/vue.js"></script>
<script   src="js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',

        created(){
            this.getList();
        },
        data() {
            return {
                form:{},
                open:false,
                personId:"10001",
                queryParams:{
                     //页面自动获取当前登录人的ID
                    description:""
                },
                pageSize:10,
                pageNum:1,

                showSearch:true,
                tableData: [],
                total:0,
                imgSrc:""
            }
        },
        methods: {

             cancel(){
                 this.open=false;
                 this.imgSrc="";
             },
            changePage(page){
                 this.pageNum=page;
                 this.getList();
            },
           deployRow (index, rows){
                 this.open=true;
                 //this.imgSrc="http://localhost:8090/mybatisplus/leaveprocess/getActPlanView"+"?procId="+rows[index].procInstId;
                axios.get(`/mybatisplus/leaveprocess/getActPlanView`+"?procId="+rows[index].procInstId,
                    {responseType: "arraybuffer"}
                   ).then(response => {
                    return 'data:image/png;base64,' + btoa(
                        new Uint8Array(response.data)
                            .reduce((data, byte) => data + String.fromCharCode(byte), '')
                    );
               }).then(data => {
                   this.imgSrc=data;
                })
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams={};
               this.getList();
            },
            getList(){
                axios.post(`/mybatisplus/leaveprocess/getHistoryList`,
                    {
                        pageSize:this.pageSize,
                        pageNum:this.pageNum,
                        description:this.queryParams.description,
                         personId:this.personId,
                    }).then(response => {
                    this.tableData = response.data.queryResult.list;
                    this.total=response.data.queryResult.total;
                })
            }
        },
    })
</script>
<style>
    /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
    .el-table th.gutter{
        display: table-cell!important;
    }
</style>
</html>
